<template>
  <el-row>
    <el-col :span="20"/>
    <el-button @click="RedirectToHomePage">返回</el-button>
  </el-row>
  <el-row/>
  <el-row/>
  <el-row/>
  <el-row>
    <el-col :span="10"/>
    <el-col :span="3">
      <el-text>账号</el-text>
      <el-input v-model="account">请输入你的账号</el-input>
    </el-col>
  </el-row>
  <el-row v-if="message != ''">
    <el-col :span="10"/>
    <el-col :span="5">
      <el-text class="alert">{{ message }}</el-text>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="10"/>
    <el-col :span="3">
      <el-text>密码</el-text>
      <el-input type="password" v-model="password">请输入你的密码</el-input>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="10"/>
    <el-col :span="1">
      <el-button @click="TxLogInfoToBackend">登录</el-button>
    </el-col>
    <el-col :span="1">
      <el-button @click="RedirectToRegisterPage">注册</el-button>
    </el-col>
    <el-col :span="1">
      <!-- 不用做了 -->
      <el-button disabled @click="RedirectToFindPassword">找回密码</el-button>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="10"/>
    <el-col :span="1">
      <el-button @click="Test_Login">测试登录</el-button>
    </el-col>
    <el-col :span="1">
      <el-button @click="Test_EliminateMsg">消除msg</el-button>
    </el-col>
  </el-row>
  <el-row/>
  <el-row/>
  <el-row/>
  <el-row/>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import { useRouter } from 'vue-router';

const account = ref('');
const password = ref('');
const message = ref('');

const router = useRouter();

// 按钮绑定功能
function TxLogInfoToBackend(){
  if(account.value == '' && password.value == ''){
    router.push('main');
  } else {
    message.value = "账号或密码错误!";
    setTimeout(()=>{
      message.value = ''
    },1000);
  }
}

function RedirectToFindPassword(){
  router.push('find-password');
}

function RedirectToRegisterPage(){
  router.push('register');
}
function RedirectToHomePage() {
  router.push('home');
}

// 测试选项
function Test_Login(){
  message.value = "成功输入密码, 账号是"+account.value +"\n 密码是"+password.value;
}
function Test_EliminateMsg(){
  message.value='';
}

</script>

<style scoped>
.alert {
  color: var(--el-color-danger-dark-2);
}
.el-row {
  margin-bottom: 10px;
  min-height: 20px;
}
.el-col {
  margin: 10px;
}
</style>

